<script setup lang="ts">
import { EnumOpType, EnumPlayOrPauseSubType, EnumViewMode } from "@renderer/assets/types";
import { useUserOpStore } from "@renderer/store/pinia/userOp";
import { computed, ref } from "vue";
import Api from "@renderer/api/api";
import { postRequest } from "@renderer/api/request";
import { getActiveTabViewOp } from "@renderer/view/hooks/common";

const opStore = useUserOpStore();


const {
  activeViewRef,
  activeOpObjRef
} =  getActiveTabViewOp()


const currentState = computed(() => {
  if (activeOpObjRef.value?.activeOp?.type === EnumOpType.playOrPause) {
    return activeOpObjRef.value.activeOp.subType;
  } else {
    return EnumPlayOrPauseSubType.end;
  }
});

const preOrNextDisabled = computed(() => {
  return currentState.value !== EnumPlayOrPauseSubType.pause;
});

const sendPlayRequest = async (params) => {
  await postRequest(Api.play, {
    playSetting: params,
    groupId: activeViewRef.value.groupId,
    viewId: activeViewRef.value.viewId,
    viewType: activeViewRef.value.viewType,
    viewMode: activeViewRef.value.viewMode,
  });
};

const playParams = ref();

const items = [
  {
    title: "慢(10fps)",
    key: 100,
    minInterval: 100,
  },
  {
    title: "快(20fps)",
    key: 50,
    minInterval: 50,
  },
  {
    title: "特别快(50fps)",
    key: 20,
    minInterval: 20,
  },
  {
    title: "不限速",
    key: 0,
    minInterval: 1,
  },
];
const selectPlaySpeed = async (key: any) => {
  opStore.setPlaySpeed(activeViewRef.value.viewId, key);
  await sendPlayRequest(playParams.value);
};

const selected = computed(() => {
  return [activeOpObjRef.value.playSpeed];
});

const handlePlay = async () => {
  updateOpState({
    type: EnumOpType.playOrPause,
    subType: EnumPlayOrPauseSubType.play,
  })
  playParams.value = {
    playStatus: EnumPlayOrPauseSubType.play,
    playSpeed: activeOpObjRef.value.playSpeed,
    viewType: activeViewRef.value.viewType,
    viewId: activeViewRef.value.viewId,
  };
  await sendPlayRequest(playParams.value);
};


const updateOpState = (targetState: {type: EnumOpType, subType: EnumPlayOrPauseSubType}) => {
  if (activeViewRef.value.viewMode === EnumViewMode.normal){
    opStore.setActiveOp(activeViewRef.value.groupId, targetState);
  }else if (activeViewRef.value.viewMode === EnumViewMode.quick){
    opStore.setActiveOp(activeViewRef.value.viewId, targetState);
  }else {
    throw Error('todo')
  }
}

const handlePause = async () => {
  updateOpState({
    type: EnumOpType.playOrPause,
    subType: EnumPlayOrPauseSubType.pause,
  })
  playParams.value = {
    playStatus: EnumPlayOrPauseSubType.pause,
    playSpeed: activeOpObjRef.value.playSpeed,
    viewType: activeViewRef.value.viewType,
    viewId: activeViewRef.value.viewId,
  };
  await sendPlayRequest(playParams.value);
};

const handleStep = (direction: EnumPlayOrPauseSubType) => {};

const handleEnd = async () => {
  updateOpState({
    type: EnumOpType.playOrPause,
    subType: EnumPlayOrPauseSubType.end,
  })
  playParams.value = {
    playStatus: EnumPlayOrPauseSubType.pause,
    playSpeed: activeOpObjRef.value.playSpeed,
    viewType:  activeViewRef.value.viewType,
    viewId:activeViewRef.value.viewId,
  };
  await sendPlayRequest(playParams.value);
};

const disabled = computed(() => {
  return !activeOpObjRef.value;
})
</script>

<template>
  <v-btn-group
    v-if="currentState === EnumPlayOrPauseSubType.end"
    class="!h-full"
  >
    <v-btn :disabled="disabled"
           @click="handlePlay()" icon="mdi-play-circle"></v-btn>
  </v-btn-group>

  <v-btn-group
    :color="
      activeOpObjRef.activeOp.type === EnumOpType.playOrPause ? 'active' : ''
    "
    class="!h-full"
    v-else
  >
    <v-btn
      :disabled="preOrNextDisabled"
      icon="mdi-skip-previous"
      @click="handleStep(EnumPlayOrPauseSubType.prev)"
    ></v-btn>

    <v-btn
      v-if="currentState === EnumPlayOrPauseSubType.play"
      icon="mdi-pause-circle"
      @click="handlePause()"
    ></v-btn>

    <v-btn v-else icon="mdi-play-circle" @click="handlePlay()"></v-btn>

    <v-btn
      icon="mdi-skip-next"
      :disabled="preOrNextDisabled"
      @click="handleStep(EnumPlayOrPauseSubType.next)"
    ></v-btn>
    <v-btn icon="mdi-rectangle" @click="handleEnd()"></v-btn>

    <v-menu location="top">
      <template v-slot:activator="{ props }">
        <v-btn v-bind="props" icon="mdi-tune-vertical-variant"> </v-btn>
      </template>

      <v-list :selected="selected" select-strategy="single-independent">
        <v-list-item
          v-for="(item, _) in items"
          @click="selectPlaySpeed(item.key)"
          :key="item.key"
          :value="item.key"
        >
          <v-list-item-title>{{ item.title }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-menu>
  </v-btn-group>
</template>

<style scoped></style>
